<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="easyui-panel" style="height: 95%">
    <!--url是请求数据的地址-->
    <table class="easyui-datagrid"
           data-options="url:'/photo.html?act=list',pagination:true,pageList: [5, 10, 15, 20],toolbar: '#photo-datagrid-toolbar',frozen: true,fit:true"
           id="photo-datagrid">
        <thead>
        <tr>
            <!--field是服务端返回的json数据的属性-->
            <th data-options="field:'id',width:80">ID</th>
            <th data-options="field:'imgUrl',width:300,formatter:formatImage">图片</th>
        </tr>
        </thead>
    </table>
    <div id="photo-datagrid-toolbar" style="height:auto">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
           onclick="doPhotoAdd()">上传1</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
           onclick="doPhotoUpload()">上传2</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'"
           onclick="doPhotoDel()">删除</a>
    </div>
    <%--打开上传图片的窗口--%>
    <div class="easyui-dialog" href="<%=request.getContextPath()%>/photo_edit.jsp" closed="true" id="add-photo-dialog"
         modal="true" title="上传图片" style="width:900px;height:500px;" buttons="#dlg-photo-buttons">
    </div>
    <div id="dlg-photo-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitPhotos()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#add-photo-dialog').dialog('close')">取消</a>
    </div>
</div>
<link href="<%=request.getContextPath()%>/media/kindeditor-4.1.10/themes/default/default.css" type="text/css"
      rel="stylesheet">
<script type="text/javascript" charset="utf-8"
        src="<%=request.getContextPath()%>/media/kindeditor-4.1.10/kindeditor-all.js"></script>
<script type="text/javascript" charset="utf-8"
        src="<%=request.getContextPath()%>/media/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript">
    function formatImage(val, row) {
        return '<img src="${PHOTO_IMAGE_URL}' + val + '" style="max-height:200px"/>';
    }
    function doPhotoAdd(){
        $("#add-photo-dialog").dialog({
            onLoad: function () {
                $("#photo-upload-iframe").reload()
            }
        });
        $('#add-photo-dialog').dialog('open')
    }
    function submitPhotos(){
        var fileForm=$("#photo-upload-iframe").contents().find("#fileupload");
        $.ajax({
            url:"<%=request.getContextPath()%>/photo.html?act=add",
            data:$(fileForm).serialize(),
            method:"post",
            success:function(data){
                if (data.status) {
                    $('#photo-datagrid').datagrid('reload');
                    $("#add-photo-dialog").dialog("close");
                } else {
                    alert(data.message);
                }
            }
        })
    }
    var kingEditorParams = {
        filePostName: "file",//指定上传文件参数名称
        uploadJson: '<%=request.getContextPath()%>/photo.html?act=upload2',//指定上传文件请求的url。
        dir: "image"//上传类型，分别为image、flash、media、file,
    }
    function doPhotoUpload(){
       var editor= KindEditor.editor(kingEditorParams).loadPlugin('multiimage', function () {
            this.plugin.multiImageDialog({
                clickFn: function (urlList) {
                    var param="";
                    $.each(urlList, function(i, data) {
                        param+="&fileNames="+data.url.substring(data.url.lastIndexOf("/"))
                    });
                    $.ajax({
                        url:"<%=request.getContextPath()%>/photo.html?act=add",
                        data:param,
                        method:"post",
                        success:function(data){
                            if (data.status) {
                                editor.hideDialog();//关闭上传框
                                $('#photo-datagrid').datagrid('reload');
                            } else {
                                alert(data.message);
                            }
                        }
                    })

                }
            });
        });
    }

    function doPhotoDel(){
        var row = $('#photo-datagrid').datagrid('getSelected');
        if (row != null && row != "") {
            if (!confirm("确定要删除吗？")) {
                return;
            }
            $.ajax({
                url: '/photo.html?act=delete',
                type: 'POST',
                data: {id: row.id},
                success: function (data) {
                    if (data.status) {
                        $('#photo-datagrid').datagrid('reload');
                    } else {
                        alert(data.message);
                    }
                }
            });
        }
    }
</script>